<template>
    <div class="icons">
         <swiper :options="swiperOption">
            <swiper-slide v-for="(page, index) of pages" :key="index">
                <div class="icon" v-for="item in page" :key="item.id">
                    <div class="icon-img">
                        <img class="icon-img-content" :src="item.imgUrl" alt="item.alt">
                    </div>
                    <p class="icon-desc">{{item.desc}}</p>
                </div>
            </swiper-slide>
         </swiper>
    </div>
</template>

<script>
export default {
    name: 'HomeIcons',
    props: {
        list: Array
    },
    data () {
        return {
            swiperOption: {
                autoplay: false
            }
        }
    },
    // data () {
    //     return {
    //         iconsList:[
    //             {
    //                 id: '001',
    //                 imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
    //                 alt: '景点门票',
    //                 desc: '景点门票'
    //             },
    //             {
    //                 id: '002',
    //                 imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
    //                 alt: '动植物园',
    //                 desc: '动植物园'
    //             },
    //             {
    //                 id: '003',
    //                 imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/87/20656da0ac042002.png',
    //                 alt: '玻璃栈道',
    //                 desc: '玻璃栈道'
    //             },
    //             {
    //                 id: '004',
    //                 imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png',
    //                 alt: '深圳欢乐谷',
    //                 desc: '深圳欢乐谷'
    //             },
    //             {
    //                 id: '005',
    //                 imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/184e261814a5d07a5d3d08cd29cf590d.png',
    //                 alt: '长隆度假区',
    //                 desc: '长隆度假区'
    //             },
    //             {
    //                 id: '006',
    //                 imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/4573132ba33603c8c3dbacc4d46a1ac6.png',
    //                 alt: '罗浮山',
    //                 desc: '罗浮山'
    //             },
    //             {
    //                 id: '007',
    //                 imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/cba147cf6cfcea7109d0bff6aac6f626.png',
    //                 alt: '香市动物园',
    //                 desc: '香市动物园'
    //             },
    //             {
    //                 id: '008',
    //                 imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/90/59a2f523ee2f9202.png',
    //                 alt: '隐贤山庄',
    //                 desc: '隐贤山庄'
    //             },
    //             {
    //                 id: '009',
    //                 imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png',
    //                 alt: '深圳欢乐谷',
    //                 desc: '深圳欢乐谷'
    //             },
    //             {
    //                 id: '010',
    //                 imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/a6/6d97515091789602.png',
    //                 alt: '世界之窗',
    //                 desc: '世界之窗'
    //             },
                
                
    //         ]
    //     }
    // },
    computed: {
        pages () {
            const pages = []
            this.list.forEach((item, index) => {
                const page = Math.floor(index / 8)
                if (!pages[page]) {
                    pages[page] = []
                }
                pages[page].push(item)
            })
        return pages
        }
    }
}
</script>
<style>
    .icons .swiper-container {
        overflow: hidden;
        height: 0;
        padding-bottom: 50%;
    }
</style>

<style lang="scss" scoped>
    // %ellipsis {
    //     overflow: hidden;
    //     white-space: nowrap;
    //     text-overflow: ellipsis;
    // }
    @import '../../../assets/styles/varibles.scss';  
    .icons {
        margin: .2rem 0;

        .icon {
            position: relative;
            overflow: hidden;
            float: left;
            width: 25%;
            height: 0;
            padding-bottom: 25%;

            .icon-img {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: .44rem;
                width: 100%;

                .icon-img-content{
                    display: block;
                    margin: 0 auto;
                    height: 100%;
                }
            }

            .icon-desc {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: .44rem;
                line-height: .44rem;
                text-align: center;
                color: $darkTextColor;
                @extend %ellipsis;
            }
        }
    }
   
</style>
